<template>
  <div>
    <art-table
      :data="tableData"
      :loading="tableLoading"
      :currentPage="pageNum"
      :pageSize="pageSize"
      @current-change="currentChange"
      @size-change="sizeChange"
    >
      <template #default>
        <el-table-column label="车型名称" prop="typename">
          <template #default="scope">
            <div class="bankcont_title_text">{{ scope.row.carName }}</div>
          </template>
        </el-table-column>

        <el-table-column label="出题规则" prop="rule">
          <template #default="scope">
            <p>判断题：{{ scope.row.trueFalseCount }} 道</p>
            <p>单选题：{{ scope.row.singleChoiceCount }} 道</p>
            <p
              v-if="
                scope.row.categoryId === '4' ||
                (scope.row.categoryId === '6' && ['2', '3'].includes(scope.row.carId))
              "
              >多选题：{{ scope.row.multipleChoiceCount }} 道</p
            >
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作">
          <template #default="scope">
            <button-table type="edit" @click="handleEdit(scope.row)" />
          </template>
        </el-table-column>
      </template>
    </art-table>

    <set-exam-question-dialog
      v-if="showExamRuleDialog"
      :show-set-exam-rule-dialog="showExamRuleDialog"
      :edit-info="editData"
      @close-dialog="handleCloseExamRuleDialog"
    ></set-exam-question-dialog>
  </div>
</template>

<script setup lang="ts">
  import SetExamQuestionDialog from '@/views/question_bank/components/SetExamQuestionDialog.vue'
  import { ref } from 'vue'
  import { getExamConfig } from '@/api/questionbank'

  const props = defineProps({
    categoryId: {
      type: String
    }
  })

  const tableData = ref([])
  const pageNum = ref(1)
  const pageSize = ref(100)
  const tableLoading = ref(false)
  const showExamRuleDialog = ref(false)
  const editData = ref({})

  const currentChange = (val: number) => {
    pageNum.value = val
    getData()
  }
  const sizeChange = (val: number) => {
    pageSize.value = val
    pageNum.value = 1
    getData()
  }

  function handleEdit(item: any) {
    showExamRuleDialog.value = true
    editData.value = JSON.parse(JSON.stringify(item))
  }

  function handleCloseExamRuleDialog(value: boolean) {
    if (value) {
      getData()
    }
    showExamRuleDialog.value = false
  }

  async function getData() {
    try {
      tableLoading.value = true
      const res = await getExamConfig({
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        categoryId: props.categoryId
      })
      if (res.code === '00000') {
        tableData.value = res.data.filter(
          (item: any) => item.categoryId === props.categoryId && item.status === 1
        )
      }
    } catch (e) {
    } finally {
      tableLoading.value = false
    }
  }

  onMounted(() => {
    getData()
  })
</script>

<style scoped lang="scss"></style>
